<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 97vh"></div>
    <div class="banner">
      <h1></h1>
      <h6>
        &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
      </h6>
      <el-input style="margin-bottom: 10px" v-model="loginForm.idNumber" placeholder="账号（身份证号）"></el-input>
      <el-input style="margin-bottom: 10px" placeholder="请输入密码" v-model="loginForm.password"
                show-password></el-input>
      <el-button type="primary" style="width:100%;margin-bottom:20px;" @click.native.prevent="login">Login</el-button>
      <p>还没有账号? <a href="#" style="color: #fff;" @click.prevent="register">注册</a></p>


    </div>


    <el-dialog title="注册" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <el-form :model="user" size="mini">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="user.name" placeholder="请输入姓名" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="user.sex" placeholder="请选择性别" style="width: 100%">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            label="手机号"
            :label-width="formLabelWidth"
            prop="phone"
            :rules="[
            { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
            ]">
          <el-input v-model="user.phone" placeholder="请输入手机号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="身份证号"
            :label-width="formLabelWidth"
            prop="idNumber"
            :rules="[
            { pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/, message: '身份证号格式不正确', trigger: 'blur' }
            ]">
          <el-input v-model="user.idNumber" placeholder="请输入身份证号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="归属机构" :label-width="formLabelWidth">
          <el-select v-model="user.agencyId" placeholder="请选择" style="width:100%">
            <el-option
                v-for="item in agencyList"
                :key="item.value"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false;clearInfo()">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
  </div>


</template>

<script>
import * as THREE from "three";
import BIRDS from "vanta/src/vanta.birds";
import {login, register} from "@/api/user";
import {setToken} from "@/utils/auth";
import {getAgencyList} from "@/api/agency";

export default {
  data() {
    //数据模型
    return {
      loginForm: {
        idNumber: 'admin',
        password: 'admin'
      },
      dialogFormVisible: false,
      formLabelWidth: '80px',
      user: {},
      agencyList: [],
    }
  },
  methods: {
    login() {
      login(this.loginForm).then((res) => {
        console.log(res)
        if (res.data.code === 1) {
          setToken(res.data.data);
          window.location.href = "/index";
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch((e) => {
      })
    },

    register() {
      //注册
      this.dialogFormVisible = true;

    },

    clearInfo() {
      this.user = {}
    },
    add() {
      console.log(this.user)
      register(this.user).then((res) => {
        console.log(res)
        if (res.data.code === 1) {
          this.$message.success("注册成功")
          this.dialogFormVisible = false;
          this.clearInfo();
          this.loginForm = res.data.data
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch((e) => {
      })
    },
    getAllAgencyList() {
      getAgencyList().then((res) => {
        if (res.data.code === 1) {
          this.agencyList = res.data.data;
        }
      }).catch((e) => {
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    handleClose2(done) {
      this.$confirm('是否记录下账号？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    validateAge(rule, value, callback) {
      if (value === undefined || value === null || value === '') {
        return callback(new Error('请输入年龄'));
      }
      if (value < 0 || value > 100) {
        callback(new Error('年龄必须在0到100之间'));
      } else {
        callback();
      }
    },

    getAgencyLists(){
      getAgencyList().then((res) => {
          if(res.data.code===1){
            this.agencyList=res.data.data;
          }
      }).catch((e) => {})
    }


  },

  mounted() {
    this.getAllAgencyList();
    this.getAgencyLists();
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    // 修改颜色时 cells 需要全大写字母 可生效
    VANTA.BIRDS({
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      backgroundColor: 0x154ea0,
      color1: 0xc52929
    });

  },

  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>


<style lang="less" scoped>
.box {
  position: relative;


  .banner {
    z-index: 999;
    position: absolute;
    top: 30%;
    left: 10%;
    color: #fff;
  }
}

h1 {
  font-size: 66px;
}

p {
  margin-top: 60px;
  font-size: 18px;
}
</style>

